<template>
  <div class="event-info">
    <div class="role-Tile">{{commonTabInfo.custom.roleName}}的菜单权限选择</div>
    <div class="event-content">
      <el-tree
        ref="tree"
        :data="menuData"
        :props="defaultProps"
        :empty-text="emptyText"
        node-key="id"
        :show-checkbox="true"
        :default-expand-all="true"
        accordion
        :check-on-click-node="true"
        :expand-on-click-node="false"
      ></el-tree>
    </div>
    <div class="cont-footer">
      <el-button @click.native="eventTab('', 'first' )">取消</el-button>
      <el-button type="primary" @click.native="getAllNodes">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getMenuQuerylist, GetRoleMenu, UpdateRoleMenu, UpdateUserMenu } from '@/api/requestConfig'
  export default {
    name: 'RoleLimit',
    data() {
      return {
        menuData: [], // 菜单树形数据
        emptyText: '-',
        defaultProps: {
          children: 'menu',
          label: 'title'
        }, // 菜单配置
        ParentId: [],
        editData: {},
        addFlag: true
      }
    },
    computed: {
      ...mapGetters([
        'commonTabInfo'
      ])
    },
    created() {
      // 获取菜单数据
      getMenuQuerylist().then(res => {
        if (res.data) {
          this.menuData = res.data
        }
      }).then(() => {
        GetRoleMenu(this.commonTabInfo.custom.id).then(res => {
          if (res.data && res.data.length > 0) {
            var needArr = []
            // 节点递归
            var getNodeChecked = function getNodeChecked(source, index) {
              if (source && source.length) {
                for (var item of source) {
                  // 只要叶子节点
                  if (item.id === index && !item.menu) {
                    needArr.unshift(index)
                  } else if (item.id === index && item.menu) {
                    break
                  } else if (item.menu && item.menu.length) {
                    getNodeChecked(item.menu, index)
                  }
                }
              }
            }
            for (var i = 0; i < res.data.length; i++) {
              getNodeChecked(this.menuData, res.data[i].menuId)
            }
            // 渲染叶子节点
            this.$refs.tree.setCheckedKeys(needArr, true)
          }
        })
      })
    },
    methods: {
      // tabs操作
      eventTab(text, tabsName, custom) {
        this.$store.dispatch('handleTabInfo', {
          text: text,
          tabsName: tabsName,
          custom: custom
        })
      },
      // 获取所有选中的节点并保存
      getAllNodes() {
        var checkedList = this.$refs.tree.getCheckedNodes(false, true) // 选中的子节点
        if (checkedList.length > 0) {
          var needArr = []
          checkedList.map(x => {
            needArr.push(x.id)
          })
          var needData = {}
          needData.roleId = this.commonTabInfo.custom.id
          needData.menuId = needArr.toString()
          UpdateRoleMenu(needData).then(res => {
            if (res.code === 200) {
              var that = this
              this.$message.success(res.message)
              setTimeout(function() {
                that.eventTab('update', 'first', 'role')
              }, 500)
              this.toUpdateUserMenu()
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          this.$message.error('请勾选角色的菜单权限')
        }
      },
      // 更新当前用户菜单权限
      toUpdateUserMenu() {
        var userId = JSON.parse(window.sessionStorage.getItem('userInfo')).id
        UpdateUserMenu(userId).then(res => {
          window.sessionStorage.setItem('roleMenu', JSON.stringify(res.data.menus))
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/info.scss";
  .role-Tile{
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 600;
  }
</style>
